<template>
  <div class="box">
    <!-- 头部 -->
    <van-nav-bar fixed placeholder title="会员卡详情" left-text="返回" @click-left="onClickLeft" right-text="" left-arrow />
    <!-- 卡片 -->
    <div class="card">
      <div class="card_1">
        <span>健身2次体验</span>
        <span>支持场馆:&nbsp;&nbsp;全部场馆</span>
        <span>使用期限:&nbsp;&nbsp;5天</span>
        <span>使用次数:&nbsp;&nbsp;10次</span>
        <div class="card_1a">
          <span>售价:&nbsp;￥100元 <span style="text-decoration: line-through; font-size: 10px; margin-top: 12px" class="t">￥200</span></span>
        </div>
      </div>
      <div class="card_2">
        <span>次卡类型</span>
      </div>
    </div>
    <!-- 选择规格 -->
    <div class="choose">
      <div class="choose_text">
        <p>选择规格</p>
      </div>
      <van-checkbox-group v-model="result" :max="1">
        <van-checkbox name="a"
          ><h6>48元(1次)<br />原价￥68<br />使用期限:5天</h6></van-checkbox
        >
        <van-checkbox name="b"
          ><h6>168元(6次)<br />原价￥408<br />使用期限:30天</h6></van-checkbox
        >
        <van-checkbox name="c"
          ><h6>48元(1次)<br />原价￥68<br />使用期限:5天</h6></van-checkbox
        >
        <van-checkbox name="d"
          ><h6>168元(6次)<br />原价￥408<br />使用期限:30天</h6></van-checkbox
        >
      </van-checkbox-group>
    </div>

    <!--  选择销售人员-->
    <div class="box-2">
      <div class="box-2-1">
        <p>选择销售人员</p>
      </div>
      <van-field readonly clickable name="picker" :value="value" label="选择销售人员" placeholder="点击选择销售人员" @click="showPicker = true" />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </div>

    <!-- 勾选同意服务协议 -->
    <div class="box-3">
      <van-checkbox icon-size="14px" v-model="checked" shape="square">勾选同意《会员服务协议》</van-checkbox>
    </div>

    <!-- 支付方式 -->
    <div class="box-4">
      <div class="box-4-1">
        <p>支付方式</p>
      </div>
      <div class="box-4-2">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell title="微信支付" clickable @click="radio = '5'">
              <template #right-icon>
                <van-radio name="5" />
              </template>
            </van-cell>
            <van-cell title="支付宝支付" clickable @click="radio = '6'">
              <template #right-icon>
                <van-radio name="6" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>

    <!-- 底部立即购买 -->
    <van-tabbar fixed>
      <van-tabbar-item icon="phone-o">联系客服</van-tabbar-item>
      <van-button @click="$router.push('/succeed_pay')" type="info" size="188">立即购买</van-button>
    </van-tabbar>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  props: ['zid'],
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    onConfirm(value) {
      this.value = value
      this.showPicker = false
    },
    // 复选框
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    onClickLeft() {
      this.$router.push(`/group_class_details/${this.zid}`)
    },
    active() {}
  },
  data() {
    return {
      value: '',
      columns: ['岳晓红', '宁谦', '安师大', '崔江沅', 'Kayla'],
      showPicker: false,
      checked: true,
      radio: '1',
      value1: 0,
      result: ['a', 'b', 'c', 'd']
    }
  }
}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  background-color: #f2f2f2;
}
.card {
  width: 330px;
  height: 150px;
  /* margin: 10px auto; */
  margin: 2% auto;
  background-image: linear-gradient(to right, #6637ff, #66cbff);
  /* background-image: linear-gradient(to right, #3aceef, rgba(77, 110, 240, 0.599)); */
  padding: 10px 10px 5px;
  display: flex;
  border-radius: 15px;
  align-items: center;
  border-bottom: 1px solid rgb(240, 240, 240);
}
.card > .card_1 {
  display: flex;
  flex-direction: column;
}
.card > .card_1 > .card_1a,
.card > .card_1 > span {
  display: inline-block;
  padding-top: 5px;
  margin: 2px 0 0 20px;
  font-size: 14px;
  color: white;
  font-weight: bold;
}
.card {
  display: flex;
  justify-content: space-between;
}
.card > .card_2 > span {
  padding: 3px 7px;
  display: inline-block;
  text-align: right;
  margin-bottom: 120px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
}
/* 选择规格 */
.choose {
  margin: 2% 3%;
}
.choose > .choose_text {
  border-bottom: 2px solid #0d80fe;
}
.choose > .choose_text > p {
  color: #0d80fe;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 16px;
}
.van-tabbar--fixed > .van-tabbar-item > .van-tabbar-item__text {
  color: gray;
}
.van-button--188 {
  width: 200px;
  border-radius: 6px;
}
.van-checkbox-group {
  background-color: #fff;
}
.van-checkbox-group.van-checkbox {
  margin: 3% 2%;
}
.van-checkbox > .van-checkbox__label > h6 {
  width: 1000px;
  font-size: 0.8rem;
  margin-left: 25px;
  color: #646566;
}
/* 选择销售人员 */
.box-2 {
  margin: 2% 3%;
}
.van-cell--clickable,
.van-field {
  padding: 0 6px;
}
.box-2 > .box-2-1 {
  border-bottom: 2px solid #0d80fe;
  /* width: 350px; */
  display: inline-block;
}
.box-2 > div > p {
  color: #0d80fe;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 16px;
}
/* 勾选服务协议 */
.van-checkbox {
  margin-left: 3px;
  padding: 8px 0px;
  /* border: 1px solid red; */
}
.van-checkbox > .van-checkbox__label {
  color: #888;
  font-size: 14px;
}
.box-3 {
  background-color: #fff;
  margin: 2%;
}
.box-4 {
  margin: 2% 3%;
}
.box-4 > .box-4-1 {
  border-bottom: 2px solid #0d80fe;
  /* width: auto; */
  display: inline-block;
}
.box-4 > div > p {
  color: #0d80fe;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 16px;
}
.box-4 > .box-4-2 {
  margin-bottom: 100px;
}
</style>

